<script setup>
import { MoreFilled, Delete, EditPen } from '@element-plus/icons-vue'
import { ref, reactive, getCurrentInstance, onMounted, h } from "vue"
const instance = getCurrentInstance();
const _this = instance.appContext.config.globalProperties //vue3获取当前this
const storage = _this.$utils.storage;

import { globalStore } from "@/store/global";
const globalVue = globalStore();

// 组件中使用，接收传参的
let propsData = defineProps({
  row: {
    type: Object,
    default: {}
  }
})
// 组件中使用，接收事件的
const emits = defineEmits(['operate1', 'operate2', 'operate3', 'operate4', 'operate5']);
</script>
<template>
  <el-button class="btn1" link type="primary" @click="emits('operate1')">
    <template #icon>
      <img class="table_operate_icon" src="@/assets/image/icon/list_btn_details.png" alt="">
    </template>
    Details  
  </el-button> 
  <el-button link type="primary" v-if="globalVue.isAdmin" :icon="EditPen" @click="emits('operate2')">Edit</el-button> 
  <el-button class="btn2" v-if="globalVue.isAdmin" link type="success" @click="emits('operate3')">
    <template #icon>
      <img style="width: 16px;height: 16px" src="@/assets/image/icon/list_ico_delete.png" alt="">
    </template>
    Delete
  </el-button> 
</template>
<style lang="less" scoped>
// .btn1{
//   position: relative;
// }
// .btn1::before{
//   content: " ";
//   display: block;
//   width: 16px;
//   height: 16px;
//   border-radius: 9999px;
//   border: 1px solid #258cff;
//   position: absolute;
//   left: 0;
//   top: 0;
// }
.btn2{
  --el-button-text-color: #FB393C;
  --el-button-hover-link-text-color: #FB393C;
}
</style>